# 整体页面布局
# demo01-wxss

. container {
display: flex; # 1
flex-direction: column; # 2
justify-content: space-around; # 3
align-items: center; # 4
}

# 1：让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
# 2：flex-direction默认从左向右排列，column则修改为从上往下排列
# 3：各元素拥有相同的间隔
# 4：设置水平方向居中

# 元素适配不同屏幕宽度
# 相对于iphone6为模型，设置图片样式为
.banner {
    height:375rpx;
    width:375rpx
}

# iPhone6的屏幕宽度：小程序规定屏宽 = 375rpx：750rpx = 1:2